<template>

    <div style="width: 100%;">

<!--       规格属性和值编辑 -->
        <spec-edit v-if="edit"/>

<!--        批量操作-->
        <batch-edit />

<!--        各种规格的商品列表-->
        <el-form :model="edit.info.skus" ref="attrValuesRef">
            <table class="mi_table f12 attr_value_table">
                <thead>
                <tr>
                    <template v-for="vo in edit.info.specs" :key="vo.title">
                        <th v-if="vo.values.length>0">{{vo.title}}</th>
                    </template>
                    <th v-for="vo in editCols" :key="vo.title">{{vo.title}}</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(sku, i) in edit.info.skus" :key="i">
                    <tr>
                        <td v-for="(rel,j) in sku.specRels"  :key="j"  class="text_center">{{rel.spec_value}}</td>
                        <td>
                            <mi-up-image v-model="sku.image" size="60px" />
                        </td>
                        <td>
                            <el-form-item :prop="i+'.cost_price'" >
                                <mi-input-number v-model="sku.cost_price" :precision="2" />
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item :prop="i+'.line_price'" >
                                <mi-input-number v-model="sku.line_price" :precision="2" />
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item :prop="i+'.price'" :rules="[{ required: true, pattern:tool.priceReg(), message: '售价必须大于0' }]">
                                <mi-input-number v-model="sku.price" :precision="2" />
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item :prop="i+'.stock'" :rules="[{ required: true, pattern:tool.priceReg(), message: '库存必须大于0' }]">
                                <mi-input-number v-model="sku.stock" />
                            </el-form-item>

                        </td>
                        <td>
                            <mi-input-number v-model="sku.weight" :precision="2" />
                        </td>
                        <td>
                            <mi-input-number v-model="sku.volume" :precision="2" />
                        </td>
                        <td>
                            <mi-input v-model="sku.goods_no" />
                        </td>

                        <td class="text_center">
                            <el-button type="primary" text @click="delProductAttrValuesRow(i)">删除</el-button>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </el-form>
<!--        各种规格的商品列表-->


    </div>
</template>

<script setup lang="ts" name="GoodsSkuEdit">
import {inject, onBeforeMount, provide, reactive, ref} from "vue"

import {FormInstance} from "element-plus";
import tool from "@/utils/tool";
import SpecEdit from "@/views/store/components/GoodsSkuEdit/SpecEdit.vue";
import Edit from "@/model/edit";
import BatchEdit from "@/views/store/components/GoodsSkuEdit/BatchEdit.vue";
import {skuEditCols} from "@/service/goodsService";

const attrValuesRef = ref<FormInstance>()
const edit : Edit = inject('edit', new Edit({}))
const editCols = skuEditCols

const delProductAttrValuesRow = (index:number) => {
   edit.info.skus.splice(index, 1)
}

const validateAttrValues = () => {
    return new Promise((resolve) => {
        attrValuesRef.value?.validate((valid, fields) => {
            if (valid){
                resolve(true)
            }else{
                for(let prop in fields){
                    attrValuesRef.value?.scrollToField(prop)
                    break
                }
                resolve(false)
            }
        })
    })

}

defineExpose({
    validateAttrValues
})


</script>

<style>
.attr_value_table .el-form-item{
    margin-bottom: 0;
}
.attr_value_table .el-input-number{
    width: 100%;
    min-width: 50px;
}
.mi_descriptions .el-descriptions__label{
    width: 120px;
}
</style>
